window.onload = function() {
    // 获取对象
    var container = document.querySelector('.video-container');
    var video = document.querySelector('.video-container video');
    var bar = document.querySelector('.video-container .bar');

    // 播放按钮
    var playBtn = document.querySelector('.video-container .play .iconfont');
    // 控制全屏按钮
    var fsBtn = document.querySelector('.video-container .fullscreen .iconfont');
    // 控制音量按钮
    var volBtn = document.querySelector('.video-container .volume .iconfont');
    // 显示当前时间
    var currentSpan = document.querySelector('.video-container .current');
    // 显示总时间
    var totalSpan = document.querySelector('.video-container .total');

    // 进度条
    var progress = document.querySelector('.video-container .progress');
    var progressLine = document.querySelector('.video-container .progress-line');
    var progressBall = document.querySelector('.video-container .progress-ball');

    // 音量条
    var volWrapper = document.querySelector('.video-container .volume');
    var volume = document.querySelector('.video-container .volume-control');
    var volumeLine = document.querySelector('.video-container .volume-line');
    var volumeBall = document.querySelector('.video-container .volume-ball');

    // 定时器
    var timer;

    // 1.播放暂停功能
    playBtn.onclick = function() {
        // if (处于暂停状态) {
        if (video.paused) {
            // 视频播放
            video.play();
            // 改变图标
            this.classList.add('icon-zanting');
            this.classList.remove('icon-bofang');
        } else {
            // 视频暂停
            video.pause();
            // 改变图片
            this.classList.add('icon-bofang');
            this.classList.remove('icon-zanting');
        }
    }

    // 2.当前播放时间和总时间
    // 总时长发生变化的时候触发的事件
    totalSpan.innerHTML = formatTime(video.duration);
    video.ondurationchange = function() {
        totalSpan.innerHTML = formatTime(video.duration);
    }

    currentSpan.innerHTML = formatTime(video.currentTime);
    // 当视频播放的时候，当前时间和进度条跟着动
    video.ontimeupdate = function() {
        currentSpan.innerHTML = formatTime(video.currentTime);

        var percent = video.currentTime / video.duration;

        progressLine.style.width = progress.offsetWidth * percent + 'px';
        progressBall.style.left = progress.offsetWidth * percent - progressBall.offsetWidth / 2 + 'px';
    }

    // 点击进度条直接定位进度条
    progress.onclick = function(e) {
        // 点击的位置
        var x = e.pageX - container.offsetLeft;

        var percent = x / progress.offsetWidth;

        // 改变进度条
        progressLine.style.width = progress.offsetWidth * percent + 'px';
        progressBall.style.left = progress.offsetWidth * percent - progressBall.offsetWidth / 2 + 'px';

        // 改变播放位置
        video.currentTime = video.duration * percent;
    }

    progressBall.onmousedown = function(e) {
        var startX = e.pageX;
        var startLeft = progressLine.offsetWidth;

        window.onmousemove = function(me) {
            // 鼠标移动位置
            var x = me.pageX - startX;

            var left = startLeft + x;
            if (left <= 0) {
                left = 0
            } else if (left > progress.offsetWidth) {
                left = progress.offsetWidth;
            }

            progressBall.style.left = left - progressBall.offsetWidth / 2 + 'px';
            progressLine.style.width = left + 'px';

            var percent = (startLeft + x) / progress.offsetWidth;
            video.currentTime = video.duration * percent;
        }

        window.onmouseup = function() {
            window.onmousemove = null;
        }
    }

    // 全屏按钮
    // 7.全屏和取消全屏-按钮只负责全屏和取消全屏
    fsBtn.onclick = function() {
        if (fullscreen()) {
            // 取消全屏
            exitFullscreen();
        } else {
            // 全屏
            requestFullscreen(container);
        }
    }

    // 8.监听屏幕改变事件-屏幕事件负责添加图标处理和大小处理
    document.onwebkitfullscreenchange = document.onmozfullscreenchange = document.onmsfullscreenchange = function() {
        if (!fullscreen()) {
            // 改变图标
            fsBtn.classList.add('icon-quanping');
            fsBtn.classList.remove('icon-quxiaoquanping');

            // 恢复原来的宽度和高度
            container.classList.remove('fs');
        } else {
            // 改变图标
            fsBtn.classList.add('icon-quxiaoquanping');
            fsBtn.classList.remove('icon-quanping');

            container.classList.add('fs');
        }
    }

    // 音量条移动
    var volSize = 1;
    volBtn.onclick = function() {
        if (video.volume === 0) {
            video.volume = volSize;

            volBtn.classList.add('icon-yinliang3');
            volBtn.classList.remove('icon-yinliang1');
            volBtn.classList.remove('icon-yinliang2');

            volumeBall.style.left = volume.offsetWidth * volSize - volumeBall.offsetWidth / 2 + 'px';
            volumeLine.style.width = volume.offsetWidth * volSize + 'px';
        } else {
            volSize = video.volume;

            video.volume = 0;
            volBtn.classList.add('icon-yinliang1');
            volBtn.classList.remove('icon-yinliang3');
            volBtn.classList.remove('icon-yinliang2');

            volumeBall.style.left = -volumeBall.offsetWidth / 2 + 'px';
            volumeLine.style.width = '0px';
        }
    }

    volume.onclick = function(e) {
        // 获取鼠标在音量条点击的位置
        var x = e.pageX - container.offsetLeft - volWrapper.offsetLeft - this.offsetLeft;

        var percent = x / volume.offsetWidth;

        if (percent > 0 && percent <= 0.5) {
            volBtn.classList.add('icon-yinliang2');
            volBtn.classList.remove('icon-yinliang3');
            volBtn.classList.remove('icon-yinliang1');
        } else if (percent > 0.5 && percent <= 1) {
            volBtn.classList.add('icon-yinliang3');
            volBtn.classList.remove('icon-yinliang1');
            volBtn.classList.remove('icon-yinliang2');
        } else {
            volBtn.classList.add('icon-yinliang1');
            volBtn.classList.remove('icon-yinliang2');
            volBtn.classList.remove('icon-yinliang3');
        }

        volumeBall.style.left = x - volumeBall.offsetWidth / 2 + 'px';
        volumeLine.style.width = x + 'px';

        video.volume = percent;
    }

    volumeBall.onmousedown = function(e) {
        var startX = e.pageX;
        var startLeft = volumeLine.offsetWidth;

        window.onmousemove = function(me) {
            // 鼠标移动位置
            var x = me.pageX - startX;

            var left = startLeft + x;
            if (left <= 0) {
                left = 0
            } else if (left > volume.offsetWidth) {
                left = volume.offsetWidth;
            }

            var percent = left / volume.offsetWidth;
            if (percent > 0 && percent <= 0.5) {
                volBtn.classList.add('icon-yinliang2');
                volBtn.classList.remove('icon-yinliang3');
                volBtn.classList.remove('icon-yinliang1');
            } else if (percent > 0.5 && percent <= 1) {
                volBtn.classList.add('icon-yinliang3');
                volBtn.classList.remove('icon-yinliang1');
                volBtn.classList.remove('icon-yinliang2');
            } else {
                volBtn.classList.add('icon-yinliang1');
                volBtn.classList.remove('icon-yinliang2');
                volBtn.classList.remove('icon-yinliang3');
            }

            volumeBall.style.left = left - volumeBall.offsetWidth / 2 + 'px';
            volumeLine.style.width = left + 'px';

            video.volume = percent;
        }

        window.onmouseup = function() {
            window.onmousemove = null;
        }
    }

    function hide() {
        timer = setTimeout(function() {
            bar.classList.add('hide');
            progress.classList.add('progress-bottom');
        }, 3000)
    }
    hide();

    container.onmouseenter = function() {
        clearTimeout(timer);

        bar.classList.remove('hide');
        progress.classList.remove('progress-bottom');
    }
    container.onmouseleave = function() {
        hide();
    }

    // 转换时间
    function formatTime(time) {
        // time = 197
        // 分钟数
        var minute = Math.floor(time / 60);
        if (minute < 10) {
            minute = '0' + minute;
        }
        // 剩余秒数
        var second = Math.floor(time % 60);
        if (second < 10) {
            second = '0' + second;
        }

        return minute + ':' + second;
    }

    // 全屏
    // ele:全屏的对象
    function requestFullscreen(ele) {
        // 全屏兼容代码
        if (ele.requestFullscreen) {
            ele.requestFullscreen();
        } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
        } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen();
        }
    }

    // 取消全屏
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
    }

    // 判断是否全屏
    function fullscreen() {
        return document.fullscreen ||
            document.webkitIsFullScreen ||
            document.mozFullScreen ||
            document.msFullscreenElement ||
            false;
    }
}